import React, { useRef } from "react";

import { Layout } from "antd";

import TopBar from "./topbar";
import SideBar from "./sidebar";
import Footer from "./footer";
import styles from "./index.less";
import TopSelection from '@/components/topselection'

interface PropsType {
  children: any;
}

const PageContainer: React.FC<PropsType> = ({ children }) => {
  const mainEl = useRef<any>(null);
  return (
    <Layout style={{ height: "100vh" }}>
      <Layout.Header className={styles["header"]}>
        <TopBar />
      </Layout.Header>
      <Layout>
        <Layout.Sider>
          <SideBar />
        </Layout.Sider>
        <Layout>
          <Layout.Header className={styles['header']}>
            <TopSelection />
          </Layout.Header>
          <Layout.Content style={{ backgroundColor: "#fff" }}>
            <div
              style={{ height: "100%", overflow: "auto" }}
              ref={mainEl}
            >
              <div style={{ width: "750px", margin: "0 auto",paddingBottom:'50px' }}>
                {React.cloneElement(children, {
                  parentelement: mainEl.current || null,
                })}
              </div>
            </div>
          </Layout.Content>
        </Layout>

      </Layout>
      <Layout.Footer
        style={{ backgroundColor: "#fff", height: "75px", padding: "0" }}
      >
        <Footer />
      </Layout.Footer>
    </Layout>
  );
};
export default PageContainer;
